import React, { Component } from 'react'
import { Button, StyleSheet, View, Alert } from 'react-native'

export default class AlertDemo extends Component {
  createTwoButtonAlert = () => {
    Alert.alert(
      "警告标题",
      "警告内容",
      [
        {
          text: "取消",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "确认", onPress: () => console.log("OK Pressed") }
      ]
    );
  }

  createThreeButtonAlert = () => {
    Alert.alert(
      "更新提醒",
      "发现新版本，是否现在更新",
      [
        {
          text: "稍后再说",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "取消",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "确认", onPress: () => console.log("OK Pressed") }
      ]
    );
  }



  render() {
    return (
      <View style={[styles.container]}>
        <Button
          onPress={() => alert('This is a button!')}
          title="alert"
        />
        <Button
          onPress={() => Alert.alert('This is a button!')}
          title="Alert.alert" 
          color={'red'}
        />
        <Button title={"两个按钮"} color={'green'} onPress={this.createTwoButtonAlert} />
        <Button title={"三个按钮"} color={'black'} onPress={this.createThreeButtonAlert} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  btn: {
    padding: 20,
  }
})

